<template>
  <div id="bodypage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homePage' }"><span id="mainpage">我的主页</span></el-breadcrumb-item>
      <el-breadcrumb-item><span>用户信息</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <!-- 新增页 -->
      <el-dialog title="用户信息表" v-dialogDrag :visible.sync="dialogVisible[1].addPage" width="1000px" :before-close="handleClose">
        <el-form :inline="true" :model="inputValue">
          <el-form-item label="身份证号" label-width="90px">
            <el-input type="number" v-model="inputValue.id" style="width:235px"></el-input>
          </el-form-item>
          <el-form-item label="用户名" label-width="60px">
            <el-input type="text" v-model="inputValue.userName" style="width:235px"></el-input>
          </el-form-item>
          <el-form-item label="电话" label-width="60px">
            <el-input type="text" v-model="inputValue.phone" style="width:235px"></el-input>
          </el-form-item>
          <span
            style="display: inline-block; color: #606266; width: 90px; box-sizing: border-box; text-align: right; padding: 0 12px 0 0;">镇村社队</span>
          <el-select clearable v-model="inputValue.selectValue.townValue" placeholder="请选择镇"
            style="width: 196px; margin-bottom: 22px;">
            <el-option v-for="item in inputValue.townOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select clearable v-model="inputValue.selectValue.villageValue" placeholder="请选择村"
            style="width: 196px; margin-bottom: 22px; margin-left: 20px;">
            <el-option v-for="item in inputValue.villageOptions" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select clearable v-model="inputValue.selectValue.communityValue" placeholder="请选择社"
            style="width: 196px; margin-bottom: 22px; margin-left: 20px;">
            <el-option v-for="item in inputValue.communityOptions" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select clearable v-model="inputValue.selectValue.termValue" placeholder="请选择园区"
            style="width: 196px; margin-bottom: 22px; margin-left: 20px;">
            <el-option v-for="item in inputValue.termOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-form-item label="备注1" label-width="90px">
            <el-input type="text" v-model="inputValue.remake1" style="width:235px"></el-input>
          </el-form-item>
          <el-form-item label="备注2" label-width="60px">
            <el-input type="text" v-model="inputValue.remake2" style="width:235px"></el-input>
          </el-form-item>
          <el-form-item label="备注3" label-width="60px">
            <el-input type="text" v-model="inputValue.remake3" style="width:235px"></el-input>
          </el-form-item>
          <el-form-item label="备注4" label-width="90px">
            <el-input type="text" v-model="inputValue.remake4" style="width:235px"></el-input>
          </el-form-item>
          <el-form-item label="备注5" label-width="60px">
            <el-input type="text" v-model="inputValue.remake5" style="width:235px"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible[1].addPage = false">取 消</el-button>
          <el-button type="success" @click="add">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改页 -->
      <el-dialog title="用户信息表" v-dialogDrag :visible.sync="dialogVisible[2].modify" width="600px" :before-close="handleClose">
        <el-form :inline="true" :model="row">
          <el-form-item label="身份证号" label-width="80px">
            <el-input type="number" v-model="row.id"></el-input>
          </el-form-item>
          <el-form-item label="用户名" label-width="80px">
            <el-input type="text" v-model="row.userName"></el-input>
          </el-form-item>
          <el-form-item label="电话" label-width="80px">
            <el-input type="text" v-model="row.phone"></el-input>
          </el-form-item><br>
          <el-form-item label="镇" label-width="80px">
            <el-select clearable v-model="row.town" placeholder="请选择镇" style="width: 187px;">
              <el-option v-for="item in editOption.townOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="村" label-width="80px">
            <el-select clearable v-model="row.village" placeholder="请选择村" style="width: 187px;">
              <el-option v-for="item in editOption.villageOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="社" label-width="80px">
            <el-select clearable v-model="row.community" placeholder="请选择社" style="width: 187px;">
              <el-option v-for="item in editOption.communityOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="队" label-width="80px">
            <el-select clearable v-model="row.term" placeholder="请选择园区" style="width: 187px;">
              <el-option v-for="item in editOption.termOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible[2].modify = false">取 消</el-button>
          <el-button type="success" @click="update">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 表格区 -->
      <div id="headerArea">
        <h2 style="margin:10px 0 10px 10px; display: inline-block;">用户信息表</h2>
        <el-button type="success" size="mini" style="margin-right: 15px;" @click="exportExcle">导出
        </el-button>
      </div>
      <div id="searchArea">
        <div style="display: inline-block;" id="searchByUsernameBox">
          <div class="searchNum">
            <el-input placeholder="使用用户名搜索" v-model="serachData.userName" clearable
              style="width: 170px; margin-left: 10px;" type="text" @keyup.enter.native="getUserInfoByName">
            </el-input>
          </div>
        </div>
        <el-button round type="success" slot="append" icon="el-icon-search" style="margin: 10px 0 10px 10px;"
          @click="getUserInfoByName">搜索
        </el-button>
        <el-button @click="dialogVisible[1].addPage = true" round type="success" slot="append" icon="el-icon-edit"
          style="margin: 10px 30px 10px 10px;">新增
        </el-button>
        <el-radio v-model="showSearch" label="地址">地址搜索</el-radio>
        <el-radio v-model="showSearch" label="园区">园区搜索</el-radio><br>
        <div v-if="showSelectValue.address" style="display: inline-block;" id="searchByAddressBox">
          <div class="searchNum" style="display: inline-block;">
            <el-select clearable v-model="serachData.selectValue.townValue" placeholder="请选择镇"
              style="width: 130px; margin: 0 10px;">
              <el-option v-for="item in serachData.townOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select clearable v-model="serachData.selectValue.villageValue" placeholder="请选择村"
              style="width: 130px; margin: 0 10px;">
              <el-option v-for="item in serachData.villageOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select clearable v-model="serachData.selectValue.communityValue" placeholder="请选择社"
              style="width: 130px; margin: 0 10px;">
              <el-option v-for="item in serachData.communityOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-select clearable v-model="serachData.selectValue.termValue" placeholder="请选择队"
                style="width: 130px; margin: 0 10px;">
                <el-option v-for="item in serachData.termOptions" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select> -->
          </div>
          <el-button round type="success" slot="append" icon="el-icon-search"
            style="margin: 10px 0 10px 10px; margin-right: 100px;"
            @click="queryInfo.pageStatus=true;getUserInfoByAdress()">搜索
          </el-button>
        </div>
        <div v-if="showSelectValue.park" style="display: inline-block;" id="searchByParkBox">
          <div class="searchNum" style="display: inline-block;">
            <el-select clearable v-model="searchByPark.selectValue.townValue" placeholder="请选择镇"
              style="width: 130px; margin: 0 10px;">
              <el-option v-for="item in searchByPark.townOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select clearable v-model="searchByPark.selectValue.parkValue" placeholder="请选择园区"
              style="width: 130px; margin: 0 10px;">
              <el-option v-for="item in searchByPark.parkOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <el-button round type="success" slot="append" icon="el-icon-search"
            style="margin: 10px 0 10px 10px; margin-right: 100px;"
            @click="queryInfo.pageStatus=true;getUserInfoByPark()">搜索
          </el-button>
        </div>
      </div>
      <el-table max-height="380" :data="userlist" :header-cell-style="{background:'#f5f7fa',color:'#606266'}" border
        stripe @row-click="getDetails" @cell-click="clickCell">
        <el-table-column sortable type="selection" width="35"></el-table-column>
        <el-table-column width="40px"><template slot-scope="scope">{{scope.$index+1}}</template></el-table-column>
        <el-table-column type="expand">
          <div slot-scope="props" style="margin-left: 20px;">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="身份证号:">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="用户名:">
                <span>{{ props.row.userName }}</span>
              </el-form-item>
              <el-form-item label="用户手机号:">
                <span>{{ props.row.phone }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="用户所属镇:">
                <span>{{ props.row.town }}</span>
              </el-form-item>
              <el-form-item label="用户所属村:">
                <span>{{ props.row.village }}</span>
              </el-form-item>
              <el-form-item label="用户所属社:">
                <span>{{ props.row.community }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="用户所属园区:">
                <span>{{ props.row.term }}</span>
              </el-form-item>
              <el-form-item label="用户公羊数:">
                <span>{{ props.row.GsheepNum }}</span>
              </el-form-item>
              <el-form-item label="用户母羊数:">
                <span>{{ props.row.MsheepNum }}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-table-column>
        <el-table-column min-width="180px" sortable prop="id" label="身份证号" align="center"></el-table-column>
        <el-table-column min-width="90px" sortable prop="userName" label="用户名" align="center"></el-table-column>
        <el-table-column min-width="120px" sortable prop="phone" label="电话" align="center"></el-table-column>
        <el-table-column min-width="100px" sortable prop="town" label="镇" align="center"></el-table-column>
        <el-table-column min-width="100px" sortable prop="village" label="村" align="center"></el-table-column>
        <el-table-column min-width="60px" sortable prop="community" label="社" align="center"></el-table-column>
        <el-table-column min-width="80px" sortable prop="term" label="园区" align="center"></el-table-column>
        <el-table-column width="120px" sortable label="用户公羊数" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top" @show="getIdInfo(scope.row, scope.column)">
              <p>姓名: {{ scope.row.GsheepNum }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.GsheepNum }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="120px" sortable prop="MsheepNum" label="用户母羊数" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top" @show="getIdInfo(scope.row, scope.column)">
              <p>姓名: {{ scope.row.MsheepNum }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.MsheepNum }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column fixed="right" sortable label="操作" align="center" width="140px">
          <template slot-scope="scope">
            <el-button-group>
              <el-tooltip class="item" effect="dark" content="修改用户信息" placement="top-start" :enterable="false">
                <el-button type="success" icon="el-icon-edit" @click='dialogVisible[2].modify = true'></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除用户信息" placement="top-end" :enterable="false">
                <el-button type="success" icon="el-icon-delete" @click="delteleItem(scope.row.id)"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
        :page-size="queryInfo.pagesize" layout="total, prev, pager, next, jumper" :total="queryInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userlist: [],
        dialogVisible: [
          { searchPage: false },
          { addPage: false },
          { modify: false }
        ],
        //分页相关数据
        queryInfo: {
          pagenum: 1, // 当前页码
          pagesize: 10, // 当前每页显示的数据数
          total: 0,
        },
        inputValue: {
          id: '',         //身份证号
          phone: '',      //手机号
          userName: '',   //用户姓名
          townOptions: [{
            value: '苏布尔嘎镇',
            label: '苏布尔嘎镇'
          }, {
            value: '红庆河镇',
            label: '红庆河镇'
          }, {
            value: '阿勒腾席热镇',
            label: '阿勒腾席热镇'
          }, {
            value: '乌兰木伦镇',
            label: '乌兰木伦镇'
          }, {
            value: '伊金霍洛镇',
            label: '伊金霍洛镇'
          }, {
            value: '札萨克镇',
            label: '札萨克镇'
          }, {
            value: '纳林陶亥镇',
            label: '纳林陶亥镇'
          }],
          //村选数据项
          villageOptions: null,
          //社选数据项
          communityOptions: null,
          //队选数据项
          termOptions: null,
          //选择结果
          selectValue: {
            townValue: '',
            villageValue: '',
            communityValue: '',
            termValue: '',
          },
          remake1: '',       //备注1  可以为null
          remake2: '',        //备注2  可以为null
          remake3: '',        //备注3  可以为null
          remake4: '',        //备注4  可以为null
          remake5: '',        //备注5  可以为null ''
          town: '',
          village: '',
          community: '',
          term: ''
        },
        //暂存当前行数据
        row: {},
        oldID: '', //暂存旧ID
        showSearch: '地址',
        showSelectValue: {
          address: true,
          park: false
        },
        serachData: {
          userName: '',
          //镇选数据项
          townOptions: [{
            value: '苏布尔嘎镇',
            label: '苏布尔嘎镇'
          }, {
            value: '红庆河镇',
            label: '红庆河镇'
          }, {
            value: '阿勒腾席热镇',
            label: '阿勒腾席热镇'
          }, {
            value: '乌兰木伦镇',
            label: '乌兰木伦镇'
          }, {
            value: '伊金霍洛镇',
            label: '伊金霍洛镇'
          }, {
            value: '札萨克镇',
            label: '札萨克镇'
          }, {
            value: '纳林陶亥镇',
            label: '纳林陶亥镇'
          }],
          //村选数据项
          villageOptions: null,
          //社选数据项
          communityOptions: null,
          //队选数据项
          // termOptions: null,
          //选择结果
          selectValue: {
            townValue: '',
            villageValue: '',
            communityValue: '',
            // termValue: '',
          }
        },
        searchByPark: {
          townOptions: [{
            value: '苏布尔嘎镇',
            label: '苏布尔嘎镇'
          }, {
            value: '红庆河镇',
            label: '红庆河镇'
          }, {
            value: '阿勒腾席热镇',
            label: '阿勒腾席热镇'
          }, {
            value: '乌兰木伦镇',
            label: '乌兰木伦镇'
          }, {
            value: '伊金霍洛镇',
            label: '伊金霍洛镇'
          }, {
            value: '札萨克镇',
            label: '札萨克镇'
          }, {
            value: '纳林陶亥镇',
            label: '纳林陶亥镇'
          }],
          //园区选择数据项
          parkOptions: null,
          //选择结果
          selectValue: {
            townValue: '',
            parkValue: '',
          }
        },
        editOption: {
          townOptions: [{
            value: '苏布尔嘎镇',
            label: '苏布尔嘎镇'
          }, {
            value: '红庆河镇',
            label: '红庆河镇'
          }, {
            value: '阿勒腾席热镇',
            label: '阿勒腾席热镇'
          }, {
            value: '乌兰木伦镇',
            label: '乌兰木伦镇'
          }, {
            value: '伊金霍洛镇',
            label: '伊金霍洛镇'
          }, {
            value: '札萨克镇',
            label: '札萨克镇'
          }, {
            value: '纳林陶亥镇',
            label: '纳林陶亥镇'
          }],
          //村选数据项
          villageOptions: null,
          //社选数据项
          communityOptions: null,
          //队选数据项
          termOptions: null,
        },
        isSearchByName: false,
        backRow: {}, //暂存当前行变量
        id: '' //暂存将删除信息的id
      }
    },
    watch: {
      showSearch(newValue) {
        if (newValue == '地址') {
          this.showSelectValue.address = true;
          this.showSelectValue.park = false;
        } else if (newValue == '园区') {
          this.showSelectValue.address = false;
          this.showSelectValue.park = true;
        } else {
          this.showSelectValue.address = false;
          this.showSelectValue.park = false;
        }
      },
      // 地址查询
      'serachData.selectValue.townValue': {
        handler(newValue) {
          this.serachData.selectValue.villageValue = ''
          switch (newValue) {
            case '苏布尔嘎镇': {
              this.serachData.villageOptions = [
                { value: '乌尔掌村', label: '乌尔掌村' }, { value: '伊勒概沟村', label: '伊勒概沟村' },
                { value: '壕赖苏村', label: '壕赖苏村' }, { value: '小乌兰敖包村', label: '小乌兰敖包村' },
                { value: '敖尔给呼村', label: '敖尔给呼村' }, { value: '哈布其勒村', label: '哈布其勒村' },
                { value: '光胜村', label: '光胜村' }, { value: '光明村', label: '光明村' },
                { value: '敏盖村', label: '敏盖村' }, { value: '阿格图村', label: '阿格图村' },
                { value: '敖包圪台村', label: '敖包圪台村' }, { value: '毛乌聂盖村', label: '毛乌聂盖村' }
              ]; break;
            }
            case '红庆河镇': {
              this.serachData.villageOptions = [
                { value: '乌兰淖尔村', label: '乌兰淖尔村' }, { value: '纳林希里村', label: '纳林希里村' },
                { value: '冯家渠村', label: '冯家渠村' }, { value: '兰家圪卜村', label: '兰家圪卜村' },
                { value: '额日克柴达木村', label: '额日克柴达木村' }, { value: '呼家壕村', label: '呼家壕村' },
                { value: '白格针村', label: '白格针村' }, { value: '台格希里村', label: '台格希里村' },
                { value: '哈希拉嘎村', label: '哈希拉嘎村' }
              ]; break;
            }
            case '阿勒腾席热镇': {
              this.serachData.villageOptions = [
                { value: '红海子村', label: '红海子村' }, { value: '甘珠尔日庙村', label: '甘珠尔日庙村' }
              ]; break;
            }
            case '札萨克镇': {
              this.serachData.villageOptions = [
                { value: '壕赖柴达木村', label: '壕赖柴达木村' }, { value: '毛盖图村', label: '毛盖图村' },
                { value: '高勒庙村', label: '高勒庙村' }, { value: '贵勒斯太村', label: '贵勒斯太村' }
              ]; break;
            }
            default: {
              this.serachData.villageOptions = null;
              this.serachData.selectValue.villageValue = ''
            }
          }
        }
      },
      'serachData.selectValue.villageValue': {
        handler(newValue) {
          switch (Boolean(newValue)) {
            case true: {
              this.serachData.communityOptions = [
                { value: '1社', label: '1社' },
                { value: '2社', label: '2社' },
                { value: '3社', label: '3社' },
                { value: '4社', label: '4社' },
                { value: '5社', label: '5社' },
                { value: '6社', label: '6社' },
                { value: '7社', label: '7社' },
                { value: '8社', label: '8社' },
                { value: '9社', label: '9社' },
                { value: '10社', label: '10社' }
              ]; break;
            }
            default: {
              this.serachData.communityOptions = null;
              this.serachData.selectValue.communityValue = ''
            }
          }
        }
      },
      // 'serachData.selectValue.communityValue': {
      //   handler(newValue) {
      //     switch (Boolean(newValue)) {
      //       case true: {
      //         this.serachData.termOptions = [
      //           { value: '1', label: '1号园区' },
      //           { value: '2', label: '2号园区' },
      //           { value: '3', label: '3号园区' },
      //           { value: '4', label: '4号园区' },
      //           { value: '5', label: '5号园区' },
      //           { value: '6', label: '6号园区' }
      //         ]; break;
      //       }
      //       default: {
      //         this.serachData.termOptions = null;
      //         this.serachData.selectValue.termValue = ''
      //       }
      //     }
      //   }
      // },
      // 园区查询
      'searchByPark.selectValue.townValue': {
        handler(newValue) {
          this.searchByPark.selectValue.parkValue = ''
          switch (Boolean(newValue)) {
            case true: {
              this.searchByPark.parkOptions = [
                { value: '1号园区', label: '1号园区' },
                { value: '2号园区', label: '2号园区' },
                { value: '3号园区', label: '3号园区' },
                { value: '4号园区', label: '4号园区' },
                { value: '5号园区', label: '5号园区' },
                { value: '6号园区', label: '6号园区' }
              ]; break;
            }
            default: {
              this.searchByPark.parkOptions = null;
              this.searchByPark.selectValue.parkValue = ''
            }
          }
        }
      },
      // 新增
      'inputValue.selectValue.townValue': {
        handler(newValue) {
          this.inputValue.selectValue.villageValue = ''
          switch (newValue) {
            case '苏布尔嘎镇': {
              this.inputValue.villageOptions = [
                { value: '乌尔掌村', label: '乌尔掌村' }, { value: '伊勒概沟村', label: '伊勒概沟村' },
                { value: '壕赖苏村', label: '壕赖苏村' }, { value: '小乌兰敖包村', label: '小乌兰敖包村' },
                { value: '敖尔给呼村', label: '敖尔给呼村' }, { value: '哈布其勒村', label: '哈布其勒村' },
                { value: '光胜村', label: '光胜村' }, { value: '光明村', label: '光明村' },
                { value: '敏盖村', label: '敏盖村' }, { value: '阿格图村', label: '阿格图村' },
                { value: '敖包圪台村', label: '敖包圪台村' }, { value: '毛乌聂盖村', label: '毛乌聂盖村' }
              ]; break;
            }
            case '红庆河镇': {
              this.inputValue.villageOptions = [
                { value: '乌兰淖尔村', label: '乌兰淖尔村' }, { value: '纳林希里村', label: '纳林希里村' },
                { value: '冯家渠村', label: '冯家渠村' }, { value: '兰家圪卜村', label: '兰家圪卜村' },
                { value: '额日克柴达木村', label: '额日克柴达木村' }, { value: '呼家壕村', label: '呼家壕村' },
                { value: '白格针村', label: '白格针村' }, { value: '台格希里村', label: '台格希里村' },
                { value: '哈希拉嘎村', label: '哈希拉嘎村' }
              ]; break;
            }
            case '阿勒腾席热镇': {
              this.inputValue.villageOptions = [
                { value: '红海子村', label: '红海子村' }, { value: '甘珠尔日庙村', label: '甘珠尔日庙村' }
              ]; break;
            }
            case '札萨克镇': {
              this.inputValue.villageOptions = [
                { value: '24', label: '壕赖柴达木村' }, { value: '25', label: '毛盖图村' },
                { value: '26', label: '高勒庙村' }, { value: '27', label: '贵勒斯太村' }
              ]; break;
            }
            default: {
              this.inputValue.villageOptions = null;
              this.inputValue.selectValue.villageValue = ''
            }
          }
        }
      },
      'inputValue.selectValue.villageValue': {
        handler(newValue) {
          switch (Boolean(newValue)) {
            case true: {
              this.inputValue.communityOptions = [
                { value: '1社', label: '1社' },
                { value: '2社', label: '2社' },
                { value: '3社', label: '3社' },
                { value: '4社', label: '4社' },
                { value: '5社', label: '5社' },
                { value: '6社', label: '6社' },
                { value: '7社', label: '7社' },
                { value: '8社', label: '8社' },
                { value: '9社', label: '9社' },
                { value: '10社', label: '10社' }
              ]; break;
            }
            default: {
              this.inputValue.communityOptions = null;
              this.inputValue.selectValue.communityValue = ''
            }
          }
        }
      },
      'inputValue.selectValue.communityValue': {
        handler(newValue) {
          switch (Boolean(newValue)) {
            case true: {
              this.inputValue.termOptions = [
                { value: '1号园区', label: '1号园区' },
                { value: '2号园区', label: '2号园区' },
                { value: '3号园区', label: '3号园区' },
                { value: '4号园区', label: '4号园区' },
                { value: '5号园区', label: '5号园区' },
                { value: '6号园区', label: '6号园区' }
              ]; break;
            }
            default: {
              this.inputValue.termOptions = null;
              this.inputValue.selectValue.termValue = ''
            }
          }
        }
      },
      // 修改
      'row.town': {
        handler(newValue) {
          this.row.village = ''
          switch (newValue) {
            case '苏布尔嘎镇': {
              this.editOption.villageOptions = [
                { value: '乌尔掌村', label: '乌尔掌村' }, { value: '伊勒概沟村', label: '伊勒概沟村' },
                { value: '壕赖苏村', label: '壕赖苏村' }, { value: '小乌兰敖包村', label: '小乌兰敖包村' },
                { value: '敖尔给呼村', label: '敖尔给呼村' }, { value: '哈布其勒村', label: '哈布其勒村' },
                { value: '光胜村', label: '光胜村' }, { value: '光明村', label: '光明村' },
                { value: '敏盖村', label: '敏盖村' }, { value: '阿格图村', label: '阿格图村' },
                { value: '敖包圪台村', label: '敖包圪台村' }, { value: '毛乌聂盖村', label: '毛乌聂盖村' }
              ]; break;
            }
            case '红庆河镇': {
              this.editOption.villageOptions = [
                { value: '乌兰淖尔村', label: '乌兰淖尔村' }, { value: '纳林希里村', label: '纳林希里村' },
                { value: '冯家渠村', label: '冯家渠村' }, { value: '兰家圪卜村', label: '兰家圪卜村' },
                { value: '额日克柴达木村', label: '额日克柴达木村' }, { value: '呼家壕村', label: '呼家壕村' },
                { value: '白格针村', label: '白格针村' }, { value: '台格希里村', label: '台格希里村' },
                { value: '哈希拉嘎村', label: '哈希拉嘎村' }
              ]; break;
            }
            case '阿勒腾席热镇': {
              this.inputValue.villageOptions = [
                { value: '红海子村', label: '红海子村' }, { value: '甘珠尔日庙村', label: '甘珠尔日庙村' }
              ]; break;
            }
            case '札萨克镇': {
              this.inputValue.villageOptions = [
                { value: '24', label: '壕赖柴达木村' }, { value: '25', label: '毛盖图村' },
                { value: '26', label: '高勒庙村' }, { value: '27', label: '贵勒斯太村' }
              ]; break;
            }
            default: {
              this.editOption.villageOptions = null;
              this.row.village = ''
            }
          }
        }
      },
      'row.village': {
        immediate: true,
        handler(newValue) {
          switch (Boolean(newValue)) {
            case true: {
              this.editOption.communityOptions = [
                { value: '1社', label: '1社' },
                { value: '2社', label: '2社' },
                { value: '3社', label: '3社' },
                { value: '4社', label: '4社' },
                { value: '5社', label: '5社' },
                { value: '6社', label: '6社' },
                { value: '7社', label: '7社' },
                { value: '8社', label: '8社' },
                { value: '9社', label: '9社' },
                { value: '10社', label: '10社' }
              ]; break;
            }
            default: {
              this.editOption.communityOptions = null;
              this.row.community = ''
            }
          }
        }
      },
      'row.community': {
        handler(newValue) {
          switch (Boolean(newValue)) {
            case true: {
              this.editOption.termOptions = [
                { value: '1号园区', label: '1号园区' },
                { value: '2号园区', label: '2号园区' },
                { value: '3号园区', label: '3号园区' },
                { value: '4号园区', label: '4号园区' },
                { value: '5号园区', label: '5号园区' },
                { value: '6号园区', label: '6号园区' }
              ]; break;
            }
            default: {
              this.editOption.termOptions = null;
              this.row.term = ''
            }
          }
        }
      }
    },
    methods: {
      //以地址搜索用户信息
      async getUserInfoByAdress() {
        this.isSearchByName = true;
        let { data } = await this.$axios({
          method: 'post',
          url: '/userList/find/local',
          data: {
            page: this.queryInfo.pagenum,
            town: this.serachData.selectValue.townValue,
            village: this.serachData.selectValue.villageValue,
            community: this.serachData.selectValue.communityValue,
            term: ''
          }
        })
        //如果获取成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 2500
          })
        } else {
          //获取失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 2500
          })
        }
        //渲染数据到页面
        this.queryInfo.total = data.data.countAll
        this.userlist = data.data.result
      },

      //以地址搜索用户信息
      async getUserInfoByPark() {
        this.isSearchByName = true;
        let { data } = await this.$axios({
          method: 'post',
          url: '/userList/find/ground',
          data: {
            page: this.queryInfo.pagenum,
            groundCount: this.searchByPark.selectValue.parkValue, //例如1号园区，字符串。
          }
        })
        //如果获取成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 2500
          })
        } else {
          //获取失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 2500
          })
        }
        //渲染数据到页面
        this.queryInfo.total = data.data.countAll
        this.userlist = data.data.result
      },

      //以用户名搜索用户信息
      async getUserInfoByName() {
        this.isSearchByName = false;
        this.queryInfo.pagenum = 1; //令页码置为1，防止地址查询和用户名查询的相互干扰
        let { data } = await this.$axios({
          method: 'post',
          url: '/userList/find/userId',
          data: {
            page: this.queryInfo.pagenum,
            name: this.serachData.userName
          }
        })
        //如果获取成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 2500
          })
        } else {
          //获取失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 2500
          })
        }
        //渲染数据到页面
        this.queryInfo.total = data.data.countAll
        this.userlist = data.data.result

      },

      //新增
      async add() {
        console.log("添加开始");
        let { data } = await this.$axios({
          method: 'post',
          url: '/userList/add',
          data: {
            id: this.inputValue.id,         //身份证号
            phone: this.inputValue.phone,      //手机号
            userName: this.inputValue.userName,   //用户姓名
            town: this.inputValue.selectValue.townValue,       //镇id
            village: this.inputValue.selectValue.villageValue,    //村id
            community: this.inputValue.selectValue.communityValue,  //社id
            term: this.inputValue.selectValue.termValue,       //队id
            remake1: this.inputValue.remake1,       //备注1  可以为null
            remake2: this.inputValue.remake2,        //备注2  可以为null
            remake3: this.inputValue.remake3,        //备注3  可以为null
            remake4: this.inputValue.remake4,        //备注4  可以为null
            remake5: this.inputValue.remake5,        //备注5  可以为null
          }
        })
        console.log(data);
        console.log("添加结束");
        //如果添加成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 1500
          })
        } else {
          //添加失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        if (this.isSearchByName && ((this.selectValue.townValue) || (this.selectValue.townValue && this.selectValue.villageValue) || (this.selectValue.townValue && this.selectValue.villageValue && this.selectValue.communityValue) || (this.selectValue.townValue && this.selectValue.villageValue && this.selectValue.communityValue && this.selectValue.termValue))) {
          this.getUserInfoByAdress();
        } else if (!this.isSearchByName && this.userName) {
          this.getUserInfoByName();
        } else {
          //若页面不刷新,则手动将元素添加到第一行
          this.inputValue.town = this.inputValue.selectValue.townValue
          this.inputValue.village = this.inputValue.selectValue.villageValue
          this.inputValue.term = this.inputValue.selectValue.termValue
          this.inputValue.community = this.inputValue.selectValue.communityValue
          this.userlist.unshift(JSON.parse(JSON.stringify(this.inputValue)))  //手动将元素添加到第一行(不知道为啥用push是显示到末尾)
        }
        this.dialogVisible[1].addPage = false
      },
      // 删除当前行数据
      async delteleItem(id) {
        const confirmResult = await this.$messagebox.confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).catch(err => err)
        if (confirmResult != "confirm") {
          return this.$message.info("已取消删除")
        }
        console.log();
        let { data } = await this.$axios({
          method: 'delete',
          url: '/userList/delete',
          data: {
            id: id
          }
        })
        //如果删除成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 1500
          })
        } else {
          //删除失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        if (this.isSearchByName && ((this.selectValue.townValue) || (this.selectValue.townValue && this.selectValue.villageValue) || (this.selectValue.townValue && this.selectValue.villageValue && this.selectValue.communityValue) || (this.selectValue.townValue && this.selectValue.villageValue && this.selectValue.communityValue && this.selectValue.termValue))) {
          this.getUserInfoByAdress();
        } else if (!this.isSearchByName && this.userName) {
          this.getUserInfoByName();
        } else {
          this.id = id
          //若页面不刷新,则手动删除
          this.userlist.forEach((arr, index) => {
            if (this.userlist[index].id == this.id) {
              this.userlist.splice(index, 1)
            }
          })
        }
      },
      //编辑更新用户信息
      async update() {
        console.log("更新开始");
        console.log(this.row, this.oldID);
        let { data } = await this.$axios({
          method: 'post',
          url: '/userList/update',
          data: {
            id: this.oldID,
            newId: this.row.id,
            userName: this.row.userName,
            phone: this.row.phone,
            town: this.row.town,
            village: this.row.village,
            community: this.row.community,
            term: this.row.term,
          }
        })
        console.log("更新中");
        //如果更新成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 1500
          })
        } else {
          //更新失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        console.log("更新结束");
        this.dialogVisible[2].modify = false
        if (this.isSearchByName && ((this.selectValue.townValue) || (this.selectValue.townValue && this.selectValue.villageValue) || (this.selectValue.townValue && this.selectValue.villageValue && this.selectValue.communityValue) || (this.selectValue.townValue && this.selectValue.villageValue && this.selectValue.communityValue && this.selectValue.termValue))) {
          this.getUserInfoByAdress();
        } else if (!this.isSearchByName && this.userName) {
          this.getUserInfoByName();
        } else {
          Object.keys(this.backRow).forEach(key => { this.backRow[key] = this.row[key] }) //若页面不刷新,则将修改过的row中的属性赋值给当前行
        }
      },

      getIdInfo(row, column) {
        console.log(row.userName, column.label.slice(2, 4));
      },

      clickCell(row, column, cell, event) {
        
      },


      //获取点击行数据并赋值给row
      getDetails(row) {
        this.row = JSON.parse(JSON.stringify(row)) // 调用JSON方法防止内存冲突
        this.oldID = this.row.id
        this.backRow = row;
      },
      //通用弹出框函数
      handleClose(done) {
        this.$messagebox.confirm('确认关闭？')
          .then(_ => { done() })
          .catch(_ => { })
      },
      //监听页码值的变化
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage
        this.getUserInfoByAdress();
      },
      //导出Excel表格
      exportExcle() {
        let data = this.userlist;
        //1. 新建一个工作簿
        let workbook = this.$XLSX.utils.book_new();
        //2. 把json对象转成工作表
        let sheet = this.$XLSX.utils.json_to_sheet(data);
        //3.在工作簿中添加工作表
        this.$XLSX.utils.book_append_sheet(workbook, sheet, '用户信息表'); //工作簿名称
        //4.输出工作表,由文件名决定的输出格式
        this.$XLSX.writeFile(workbook, '用户信息表(导出日期：' + this.$moment().format("YYYY年MM月DD日 HH时mm分ss秒 dddd") + ').xlsx'); // 保存的文件名
      },
    },
  }
</script>

<style Lang="less" scoped>
  * {
    color: #4b9100;
  }

  .searchNum>>>.el-input__inner {
    border: 1.5px solid rgb(75, 152, 207);
    border-radius: 8px;
    color: #000;
  }

  #headerArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 23%;
  }

  .el-form>>>.el-form-item__label {
    width: 6.25rem;
    color: #000000;
  }
</style>